<template>
  <div class="dashboard-container">
    <!-- 头部四个卡片区域 -->
    <el-row :gutter="10" style="margin-bottom: 20px">
      <el-col :span="6">
        <el-card>
          <Card title="总销售额" :num="`¥ ${homeList.salesTotal}`">
            <template v-slot:content>
              <div class="box">
                周同比 {{ homeList.salesGrowthLastMonth }}%
                <span class="iconfont icon-shangsheng"></span>日同比 {{ homeList.salesGrowthLastDay }}%
                <span class="iconfont icon-xiajiang-copy xiajiang"></span>
              </div>
            </template>
            <template v-slot:footer>
              <div>日销售额 ¥ {{ homeList.salesToday }}</div>
            </template>
          </Card>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Card title="访问量" :num="homeList.visitTotal">
            <template v-slot:content>
              <LineCharts
                class="lineCharts"
                :dataList="homeList.visitTrend"
                :smooth="false"
              ></LineCharts>
            </template>
            <template v-slot:footer>
              <div>日访问量 {{ homeList.visitToday }}</div>
            </template>
          </Card>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Card title="支付笔数" :num="homeList.payTotal">
            <template v-slot:content>
              <BarCharts></BarCharts>
            </template>
            <template v-slot:footer>
              <div>转换率{{ homeList.payRate }}%</div>
            </template></Card
          >
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Card title="运营活动效果" :num="`${homeList.activityRate}%`">
            <template v-slot:content>
              <el-progress
                :percentage="78"
                :color="'#9acd32'"
                :show-text="false"
                style="height: 50px; padding-top: 22px"
              ></el-progress>
            </template>
            <template v-slot:footer>
              <div class="box">
                周同比 {{ homeList.activityGrowthLastMonth }}%
                <span class="iconfont icon-shangsheng"></span>日同比 {{homeList.activityGrowthLastDay}}%
                <span class="iconfont icon-xiajiang-copy xiajiang"></span>
              </div>
            </template>
          </Card>
        </el-card>
      </el-col>
    </el-row>
    <!-- 销售额和访问量模块 -->
    <Sell></Sell>
    <!-- 底部区域 -->
    <el-row :gutter="10" style="margin-top: 15px">
      <!-- 线上热门搜索模块 -->
      <el-col :span="12">
        <Search></Search>
      </el-col>
      <!-- 销售额类别占比 -->
      <el-col :span="12">
        <Category></Category>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
// 引入子组件
import Card from "./Card";
import LineCharts from "./LineCharts";
import BarCharts from "./BarCharts";
import Sell from "./Sell";
import Search from "./Search";
import Category from "./Category";
export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"]),
    ...mapState("home", ["homeList"]),
  },
  // 注册子组件
  components: {
    Card,
    LineCharts,
    BarCharts,
    Sell,
    Search,
    Category,
  },
  mounted() {
    // 派发actions
    this.$store.dispatch("home/getHomeList");
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 0 20px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
<style>
.el-progress-bar__outer::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 100%;
  background-color: #9acd32;
  top: 0;
  left: 80%;
}
</style>
